---
layout: default
title: Furatto - Docs
---

<h1>Getting Started</h1>

<p class="main-motto">Whether you are using Scss or CSS, it is really easy to start a project and get things done in no time. Seriously no time...</p>

<a href="{{ site.download.dist }}" class="button primary large" onclick="_gaq.push(['_trackEvent', 'Furatto Actions', 'Download', 'Download V3']);">Download Furatto</a>
<a href="https://github.com/IcaliaLabs/furatto/blob/master/README.md" class="button primary large" onclick="_gaq.push(['_trackEvent', 'Furatto Actions', 'Download', 'Bower']);">Install via Bower</a>

<hr />

<!--getting started descriptions-->
<div class="row getting-started-descriptions">
   <div class="col-4">
    <h4 class="header">Built using Sass & Compass</h4>  
    <p>Furatto is developed in Sass, which is a CSS meta-language that helps you write cleaner and more elegant CSS so that is easier to maintain over time without the headaches of pure CSS. It also integrates Compass to provide a cleaner set of CSS3 rules.</p>
   </div>
   <div class="col-4">
    <h4 class="header">Deep into the CSS</h4>
    <p>This is the easiest way to go to get started. The CSS version will get you right into the hacking and start coding wheter is a simple or a complex site.</p>
   </div>
   <div class="col-4">
    <h4 class="header">Building an app</h4>  
    <p>As Rails developers, at <a href="http://icalialabs.com">Icalia Labs</a> we build our front end on top of Furatto. To make life easier we provide a <a href="https://github.com/IcaliaLabs/furatto-rails">gem</a> that integrates perfectly with Rails. You can follow the guide <a href="/furatto/using_rails">here</a>. We are working on building <a href="/furatto/examples">starter kits</a> in different frameworks.</p>
   </div>
</div>
<!--getting started descriptions-->
<hr />

<!--codepen demo-->
<div class="codepen-demo">
   <h2>Try Furatto at codepen</h2>
    <p>Want to take Furatto for a quick spin?, we have provided an example at <a href="http://cdpn.io/umkny" onclick="_gaq.push(['_trackEvent', 'Furatto Actions', 'Examples', 'Codepen']);">codepen</a> with the most basic elements for you to give it a try.</p>
   <a href="http://cdpn.io/umkny" target="_blank" class="button primary large" onclick="_gaq.push(['_trackEvent', 'Furatto Actions', 'Examples', 'Codepen']);">Take me there! <i class="fa fa-long-arrow-right"></i></a>
</div>

<!--codepen demo-->
<hr />

<!--whats included-->
<div class="whats-included">
  <h2>What's inside?</h2>
  <p>Within the download, Furatto comes with a <span class="code">dist</span>, <span class="code">examples</span> and <span class="code">src</span> directories based on a logical common pattern which makes the acces faster and easier for you to start hacking right away.</p>
  <div class="row">
     <div class="col-6">
       <h4 class="text-warning">Precompiled Furatto</h4>
       <p>The dist directory from your download, includes the compiled versions of Furatto in 2 versions, production and development, for a quick drop-in to almost any web project.</p>
     </div>
     <div class="col-6">
       <h4 class="text-warning">Follow the source</h4>
       <p>We also provide a src directory on which you have access to the <a href="https://github.com/IcaliaLabs/furatto/tree/master/scss">sass</a> files for an advance configuration. This will let you compile your own version of Furatto and take it to the next level.</p>
     </div>
  </div>
  <hr />
  <h3>Components and Structure</h3>
  <div class="row">
     <div class="col-6">
      <h4>Navigation</h4>  
      <p>Web is all about following links. Navigation is essential when building a website, in Furatto there are many ways to accomplish this, a <a href="/furatto/navigation_bar">navigation bar</a>, <a href="/furatto/off_screen">off screen navigation</a> and many more..</p>
     </div>
     <div class="col-6">
      <h4>Kick ass Grid</h4>  
      <p>Simple and neat <a href="/furatto/grid">grid</a> to help you build your next mobile web application. Furatto provides support for nested columns and stacked them on small devices.</p>
     </div>
  </div>
  <div class="row">
     <div class="col-6">
      <h4>Buttons</h4>  
      <p>Yeah we know plain links are bored, so we made them awesome with buttons. We include color variations, differente sizes, and powerful mixins to bring your own to life, you little Frankenstein.</p>
     </div>
     <div class="col-6">
      <h4>Responsive utilities</h4>  
      <p>Hidding things on small devices is important to improve user experience. Furatto provides class names to hide or show the elements you want for different screen sizes.</p>
     </div>
  </div>
  <div class="row">
     <h4>...and there is more...much more</h4>
  </div>
</div>

<!--whats included-->

<hr />
<!--examples-->
<div class="docs-examples">
  <h3>Sassy examples...</h3>
  <p>Psst! here are few examples of what you can do with Furatto in no time, seriously!</p>
  <div class="row">
     <div class="col-6 text-center">
       <a href="/furatto/examples/bare_bones/" class="example-link" target="_blank" onclick="_gaq.push(['_trackEvent', 'Furatto Actions', 'Examples', 'Bare bones']);">
         <img src="/furatto/assets/img/FurattoBareBones.png" alt="" class="responsive polaroid" />  
         <h5>Bare bones Template</h5>
         <small>Includes the basic HTML, the CSS and JS to start any project.</small>
       </a>
     </div>
     <div class="col-6 text-center">
       <a href="/furatto/examples/login/" class="example-link" target="_blank" onclick="_gaq.push(['_trackEvent', 'Furatto Actions', 'Examples', 'Login']);">
        <img src="/furatto/assets/img/FurattoLogin.png" alt="" class="responsive polaroid" />  
        <h5>Log In template</h5>
        <small>Build a simple and beautiful login form.</small>
      </a>
     </div>
  </div>
  <div class="row">
     <div class="col-6 text-center">
       <a href="/furatto/examples/gallery/" class="example-link" target="_blank" onclick="_gaq.push(['_trackEvent', 'Furatto Actions', 'Examples', 'Gallery']);">
        <img src="/furatto/assets/img/FurattoGallery.png" alt="" class="responsive polaroid" />  
      <h5>Gallery</h5>
      <small>An image gallery built with the grid</small>
      </a>
     </div>
     <div class="col-6 text-center">
       <a href="/furatto/examples/blog/" class="example-link" target="_blank" onclick="_gaq.push(['_trackEvent', 'Furatto Actions', 'Examples', 'Blog']);">
        <img src="/furatto/assets/img/FurattoBlog.png" alt="" class="responsive polaroid" />  
      <h5>Blog</h5>
      <small>A simple blog template</small>
      </a>
     </div>
  </div>
</div>
<!--examples-->

<hr />
<h3>App kits</h3>
  <p>We are making great efforts to provide starting app kits for different frameworks such as Rails, Nodejs and more. If you want to help us make this you can always do it through a <a href="https://github.com/IcaliaLabs/furatto/compare/">pull request</a>. We'll be happy to include it.</p>
  <a href="/furatto/examples" class="button large primary">Check the kits <i class="fa fa-medkit"></i></a>

  <hr />
<!--missing docs-->
<div class="missing-docs">
   <h2>Was this starting guide helpful?</h2>
   <p>We are always improving not just the core of Furatto, but good and high quality documentation is important. We appreciate all the feedback we receive on how to make it better and more understandable.</p>
   <p>We can make this better, so we are building a forum where you can post your doubts about the framework, or if you have any trouble with the documentation. For now you can open an <a href="https://github.com/IcaliaLabs/furatto/issues/new">issue</a> at Github.</p>
   <a href="#" class="button">Let me know when the forum is ready</a>
</div>
<!--missing docs-->

<hr />

<!--license-->
<div class="license">
  <h2>License</h2>  
  <p>Furatto 3 is now under the MIT license, which in previous versions was under the Apache 2 license. It is copyright 2014 Icalia Labs. Some of the chunks you'll find in the license are:</p>

  <h5>It requires you to:</h5>
    <ul>
      <li>Include the license and copyright notice in your works</li>
    </ul>
  <h5>It allows you to:</h5>
    <ul>
      <li>Freely download and use Furatto, in whole or in part, for personal, private, company internal, or commercial purposes</li>
      <li>Use Furatto in packages or distributions that you create</li>
      <li>Modify the source code</li>
      <li>Grant a sublicense to modify and distribute Furatto to third parties not included in the license</li>
    </ul>
  <h5>You cannot:</h5>
    <ul>
      <li>Hold the authors and license owners liable for damages as Furatto is provided without warranty</li>
      <li>Redistribute any piece of Furatto without proper attribution</li>
      <li>Hold the creators or copyright holders of Furatto liable</li>
    </ul>
    <p>The full Furatto license is located <a href="https://github.com/IcaliaLabs/furatto/blob/master/LICENSE">in the project repository</a> for more information.</p>
</div>
<!--license-->
